<!--
 * @Description:  FrmockExam
 * @Author: your name
 * @Date: 2024-02-27
 * @LastEditTime: 2024-02-27
 * @LastEditors: Please set LastEditors
-->

<template>
  <div
    id="content"
    v-loading="loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div class="main_con">
      <!-- 头部 -->
      <div class="header">
        <h5 class="test_tit">123</h5>
        <div class="countdown">Time Left: {{ timeText }}</div>
        <div class="pause" @click="pauseCD">
          <img src="@/assets/images/cd_start.png" alt="" v-if="started" />
          <img src="@/assets/images/cd_pause.png" alt="" v-else />
          Pause
        </div>
      </div>
      <!-- content-内容区域 -->
      <div class="main_box">
        <div class="left" v-if="sidebar_show">
          <div class="top_con">
            <div class="user_avatar">
              <img
                src="https://www.rongyuejiaoyu.com/static/index/images/head8.jpg"
                alt=""
              />
              <p class="name">1223213</p>
            </div>
            <div class="ti_list">
              <span
                title="To This"
                class="t_item"
                :class="{
                  current: index == current_id,
                  done: item.is_true !== -1,
                  marked: item.flag
                }"
                v-for="(item, index) in 15"
                :key="index"
                @click="current_id = index"
              >
                {{ index + 1 }}
              </span>
            </div>
          </div>
          <div class="status_box">
            <div class="cut">
              <div></div>
              <p>Current</p>
            </div>
            <div class="new">
              <div></div>
              <p>New</p>
            </div>
            <div class="done">
              <div></div>
              <p>Done</p>
            </div>
            <div class="marked">
              <div></div>
              <p>Marked</p>
            </div>
          </div>
          <div class="arr_l" @click="sidebar_show = false" v-if="sidebar_show">
            {{ icon_r }}
          </div>
        </div>
        <div class="right" :class="{ all_show: !sidebar_show }">
          <div class="test_item" v-for="(e, i) in 2" :key="i">
            <div v-if="i == current_id">
              <div class="que_tit">
                <span class="tiNum">{{ i + 1 }}</span>
                <!-- <div class="tit_info" v-html="e.title"></div> -->
                <div class="tit_info">
                  All the following are operational risk loss events, except:
                </div>
              </div>
              <div class="options">
                <label v-for="(item, index) in 4" :key="index">
                  <input
                    type="radio"
                    :name="e"
                    @click="choose_answer(index, i)"
                    :checked="index + 1 == e.user_answer_index"
                  />
                  <div style="display: flex; margin-left: 15px">
                    <span>{{ index | opt }}.</span>
                    <p>A loan officer inaccurately enters client financial</p>
                  </div>
                </label>
              </div>
            </div>
          </div>
          <div class="arr_r" v-if="!sidebar_show" @click="sidebar_show = true">
            {{ icon_l }}
          </div>
        </div>
      </div>

      <!-- 底部 -->
      <div class="bottom">
        <div class="left">
          <button @click="endTime">End Exam</button>
        </div>
        <div class="right">
          <div class="abb_btn" @click="pdf_show = true">Abbreviation List</div>
          <div class="mark_btn" @click="add_mark()" title="Click to add Mark">
            <div class="mark_box">
              <img src="@/assets/images/add_mark.png" alt="" />
            </div>
            <p>Mark</p>
          </div>
          <div class="pre_btn" @click="pre_test">
            <img src="@/assets/images/pre_frm.png" alt="" />
            <p>Previous</p>
          </div>
          <div class="next_btn" @click="next_test">
            <p>Next</p>
            <img src="@/assets/images/next_frm.png" alt="" />
          </div>
        </div>
      </div>
    </div>

    <!-- 暂停弹框 -->
    <div class="dialog_paused dialogCommon" v-if="paused_show">
      <div class="inner">
        <img src="@/assets/images/icon-save.png" alt="" />
        <p>做题已暂停，点击按钮继续做题</p>
        <button @click="continueTest">继续做题</button>
      </div>
    </div>

    <!-- 提交弹框 -->
    <div class="submit_dialog dialogCommon" v-if="dialog_show">
      <div class="inner">
        <div class="top">Confirm Finish</div>
        <img class="wh_img" src="@/assets/images/ry_wh.png" alt="" />
        <h5>Are you sure would like to finish the test?</h5>
        <div class="btns">
          <button @click="submitTest">Finish</button>
          <button @click="cancelSubmit">Cancel</button>
        </div>
      </div>
    </div>

    <!-- 倒计时结束弹框 -->
    <div class="timeOver dialogCommon" v-if="timeOverShow">
      <div class="inner">
        <h5 class="tit">Time Out</h5>
        <img src="@/assets/images/warning.png" alt="" />
        <p>The time period allocated for this exam is now complete.</p>
        <button @click="submitTest">Finish</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FrmockExam',
  data() {
    return {
      started: true,
      loading: false,
      sidebar_show: true,
      current_id: 0,
      test_list: [],
      paused_show: false,
      dialog_show: false,
      icon_r: '<',
      icon_l: '>',
      test_time: 0,
      timing: 240 * 60,
      timer: null,
      clone_timing: 240 * 60,
      timeText: '00:00:00',
      timeOverShow: false
    }
  },
  created() {
    this.startCD()
  },
  methods: {
    pauseCD() {
      clearInterval(this.timer)
      this.paused_show = true
      this.started = false
    },
    continueTest() {
      this.paused_show = false
      this.startCD()
      this.started = true
    },
    next_test() {},
    pre_test() {},
    endTime() {
      this.dialog_show = true
      clearInterval(this.timer)
    },
    submitTest() {
      if (this.timing <= 0) {
        this.timeOverShow = false
        console.log(213)
      } else {
        console.log('000000000')
        this.$router.push({
          path: '/newzhike/FRM/frmtestReport',
          query: {}
        })
      }
    },
    cancelSubmit() {
      this.dialog_show = false
      this.startCD()
    },
    add_mark() {},
    choose_answer() {},
    startCD() {
      this.timer = setInterval(this.initTime, 1000)
    },
    initTime() {
      this.timing--
      // this.clone_timing++
      const h = this.formatTime(Math.floor(this.timing / 3600)),
        m = this.formatTime(Math.floor((this.timing % 3600) / 60)),
        s = this.formatTime(Math.floor(this.timing % 60))
      this.timeText = h + ':' + m + ':' + s
      if (this.timing <= 0) {
        this.timeText = '00:00:00'
        this.timeOverShow = true
        clearInterval(this.timer)
      }
      // if (this.clone_timing >= this.test_time) {
      //   this.clone_timing >= this.test_time
      // }
    },
    formatTime(t) {
      return t < 10 ? '0' + t : t
    }
  },
  filters: {
    opt(val) {
      var v = Number(val)
      switch (v) {
        case 0:
          return 'A'
          break
        case 1:
          return 'B'
          break
        case 2:
          return 'C'
          break
        default:
          return 'D'
          break
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/styles/frmComputerTest.scss';
</style>
